<template>
  <div>
    <el-form @submit.native.prevent class="query-table-form" :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="借款人/担保客户查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <select-address
          v-model="params.address_code"
          :auto-top="1"
          placeholder="地址查询"
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.bank_name"
          placeholder="银行名称查询"
          clearable
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryDate"
          type="month"
          placeholder="选择月"
          :picker-options="pickerOptions"
          @change="handleDateQuery()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" class="table-sm" :columns="tableColumns" :data="tableData">
      <template v-slot:use="scope">
        <div class="text-truncate" :title="scope.row.funds_use_dir">
          {{ scope.row.funds_use_dir }}
        </div>
      </template>
      <template v-slot:status="scope">
        <span class="badge badge-wrap" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      append-to-body
      top="30px"
      width="1100px"
      :close-on-click-modal="false"
      :visible.sync="oneIndustryVisible"
    >
      <industry-credit :one-industry="oneIndustry"></industry-credit>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

import IndustryCredit from '@/bank/components/IndustryCredit'
import SelectAddress from '@/components/select/SelectAddress'

import hndTableMixin from '@/bank/mixin/hndTable'

import { queryTrouble } from '@vimi/utils-api'
export const hndBaseTableColumns = [
  {
    attrs: { label: '借款人/担保客户', prop: 'customer_name', minWidth: '120px' },
    process: (v, row) => ({
      attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
    }),
  },
  { attrs: { label: '客户类型', prop: 'org_class_name', align: 'center' } },
  { attrs: { label: '贷款金额/拟担保金额(万元)', prop: 'warranty_amount', align: 'center' } },
  { attrs: { label: '放款日/拟担保起始日', prop: 'loadDate', align: 'center' } },
  { attrs: { label: '到期日', prop: 'loadEndDate', align: 'center' } },
  { attrs: { label: '贷款期限(月)', prop: 'warranty_period', align: 'center' } },

  { attrs: { label: '十二大产业', prop: 'main_business', align: 'center', minWidth: '110px' } },
  {
    attrs: { label: '主营业务', prop: 'parent_main_business', align: 'center', minWidth: '110px' },
  },
  { attrs: { label: '联系电话', prop: 'corp_phone', align: 'center' } },
  { attrs: { label: '导入银行', prop: 'bank_name', align: 'center' } },
  { attrs: { label: '借款用途', prop: 'funds_use_dir', align: 'center' }, slot: 'use' },
]

export const pickerOptions = {
  disabledDate(time) {
    const date = new Date()
    const month = date.getMonth()
    let maxTime = new Date(date.getFullYear(), month)
    return time < new Date(2020, 1) || time > maxTime
  },
}

export default {
  components: {
    IndustryCredit,
    SelectAddress,
  },
  mixins: [hndTableMixin],
  props: {},
  data() {
    return {
      pickerOptions,
      params: {
        index: 1,
        size: 10,
        'import_status.eq': '1',
        customer_name: '',
        'bank_code.endlike': '',
        'is_ex_approval.eq': 1,
        'is_pass.in': '0,2',
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'datum_one_county_industry',
      importFileUrl: '',
      tableColumns: [
        ...hndBaseTableColumns,
        { attrs: { label: '状态', prop: 'statusLabel', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: '80px' },
          operations: [{ content: '详情', icon: 'fa fa-search', event: this.showCreditFile }],
        },
      ],

      // 详情
      oneIndustry: {},
      oneIndustryVisible: false,

      queryDate: '',
    }
  },
  computed: {
    ...mapGetters(['user']),
    bankName() {
      return this.org.orgName || '-'
    },
    bankCode() {
      return this.org.orgCode
    },
  },
  watch: {},
  created() {
    this.params['bank_code.endlike'] = this.org.orgCode
    this.getData()
  },
  methods: {
    getParams() {
      return this.params
    },
    handleDateQuery() {
      const startTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 1}-1`
        : ''
      const endTime = this.queryDate
        ? `${this.queryDate.getFullYear()}-${this.queryDate.getMonth() + 2}-1`
        : ''
      this.params['create_time.gte'] = startTime
      this.params['create_time.lt'] = endTime
      this.getData()
    },
    getPostUrl(importKey) {
      return (
        '/api/credit/import/' +
        queryTrouble('datum_one_county_industry', {
          importKey,
          'bank_name.eq': this.bankName,
          'bank_id.eq': this.clientId,
          'bank_code.eq': this.bankCode,
        })
      )
    },

    dataAdapter(item) {
      item.loadDate = this.$utils.dateFormat(item.load_date, 'yyyy-MM-dd')
      item.loadEndDate = this.$utils.dateFormat(item.load_end_date, 'yyyy-MM-dd')
      const enumStatus = {
        0: { label: '待确认', style: 'info' },
        2: { label: '已拒绝', style: 'danger' },
      }
      const status = enumStatus[item.is_pass] || {}
      item.statusLabel = status.label
      item.statusStyle = status.style
      return item
    },
    showCreditFile(row = {}) {
      this.oneIndustry = row
      this.oneIndustryVisible = true
    },
    handleSuccess() {
      this.$store.dispatch('getTaskCountHnd')
      this.getData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped></style>
